import "./styles/index.scss";
import { Button, ButtonType, ButtonSize } from "./components/Button/button";
import { Menu, MenuItem, SubMenu } from "./components/Menu";
import { Icon } from "./components/Icon";
import { Upload } from "./components/Upload";

import {
  faHome,
  faUser,
  faCog,
  faSpinner,
  faHeart,
  faStar,
  faSearch,
  faBell,
  faUpload,
} from "@fortawesome/free-solid-svg-icons";

function App() {
  const handleMenuSelect = (index: string) => {
    console.log("选中了菜单项:", index);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>组件库演示</h1>

        <h2>Button 组件</h2>
        <div style={{ marginBottom: "20px" }}>
          <Button btnType={ButtonType.danger}> hello</Button>
          <Button
            onClick={(e) => {
              e.preventDefault();
              alert(123);
            }}
          >
            点击
          </Button>
          <Button disabled> hello</Button>
          <Button btnType={ButtonType.primary} size={ButtonSize.lg}>
            主要按钮
          </Button>

          <Button
            btnType={ButtonType.link}
            href="https://www.baidu.com"
            size={ButtonSize.lg}
          >
            baidu
          </Button>
          <Button
            btnType={ButtonType.link}
            href="https://www.baidu.com"
            size={ButtonSize.lg}
            target="_blank"
          >
            baidu
          </Button>
        </div>

        <h2>Menu 组件 - 水平菜单</h2>
        <div style={{ marginBottom: "40px", width: "100%" }}>
          <Menu onSelect={handleMenuSelect}>
            <MenuItem>首页</MenuItem>
            <MenuItem>产品</MenuItem>
            <MenuItem disabled>服务</MenuItem>
            <SubMenu title="更多">
              <MenuItem>关于我们</MenuItem>
              <MenuItem>联系我们</MenuItem>
              <MenuItem>帮助中心</MenuItem>
            </SubMenu>
          </Menu>
        </div>

        <h2>Menu 组件 - 垂直菜单</h2>
        <div style={{ marginBottom: "40px", display: "flex", gap: "40px" }}>
          <Menu mode="vertical" style={{ width: "200px" }}>
            <MenuItem>个人资料</MenuItem>
            <MenuItem>账户设置</MenuItem>
            <SubMenu title="系统设置">
              <MenuItem>权限管理</MenuItem>
              <MenuItem>日志查看</MenuItem>
            </SubMenu>
            <MenuItem>退出登录</MenuItem>
          </Menu>

          <Menu
            mode="vertical"
            defaultIndex="1"
            defaultOpenSubMenus={["2"]}
            style={{ width: "200px" }}
          >
            <MenuItem index="0">选项一</MenuItem>
            <MenuItem index="1">选项二</MenuItem>
            <SubMenu index="2" title="选项三">
              <MenuItem>子选项一</MenuItem>
              <MenuItem>子选项二</MenuItem>
            </SubMenu>
          </Menu>
        </div>

        <h2>Icon 组件</h2>
        <div
          style={{
            marginBottom: "20px",
            display: "flex",
            gap: "10px",
            alignItems: "center",
            flexWrap: "wrap",
          }}
        >
          <Icon icon={faHome} title="首页" />
          <Icon icon={faUser} title="用户" />
          <Icon icon={faCog} title="设置" />
          <Icon icon={faHeart} color="#ff6b6b" title="喜欢" />
          <Icon icon={faStar} color="#ffd43b" title="收藏" />
          <Icon icon={faSearch} size="lg" title="搜索" />
          <Icon icon={faBell} size="xl" title="通知" />
          <Icon icon={faSpinner} spin title="加载中" />
        </div>

        <div
          style={{
            marginBottom: "20px",
            display: "flex",
            gap: "10px",
            alignItems: "center",
          }}
        >
          <Icon icon={faHome} size="sm" title="小图标" />
          <Icon icon={faHome} size="lg" title="大图标" />
          <Icon icon={faHome} size="xl" title="超大图标" />
          <Icon icon={faHome} size="2xl" title="2倍图标" />
        </div>

        <div
          style={{
            marginBottom: "20px",
            display: "flex",
            gap: "10px",
            alignItems: "center",
          }}
        >
          <Icon
            icon={faHeart}
            color="#ff6b6b"
            onClick={() => alert("点击了爱心图标!")}
            title="可点击图标"
          />
          <Icon icon={faUser} disabled title="禁用图标" />
        </div>

        <h2>Upload 组件</h2>
        <div style={{ marginBottom: "20px" }}>
          <h3>基本上传</h3>
          <Upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            onChange={(file) => {
              console.log("文件状态改变:", file);
            }}
            onRemove={(file) => {
              console.log("移除文件:", file);
            }}
          >
            <Button btnType={ButtonType.primary}>
              <Icon icon={faUpload} /> 点击上传
            </Button>
          </Upload>

          <h3>多文件上传</h3>
          <Upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            onChange={(file) => {
              console.log("文件状态改变:", file);
            }}
            multiple
          >
            <Button btnType={ButtonType.default}>
              <Icon icon={faUpload} /> 选择多个文件
            </Button>
          </Upload>
        </div>

        <hr></hr>
        <code>const a = 'b' </code>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
